<template>
  <div class="courseware page-exp">
    <pageHeader></pageHeader>
    <img :src="bannerImg" class="course_banner" alt />
    <div class="course_content">
      <div class="course_title">
        <div class="course-bt">
          <div class="course-zw"></div>
          <div class="course-part flex-c" v-bind:class="{ 'bottom-line': courseFlag == '1' }" @click="onSltCourse('1')">全部</div>
          <div
            class="course-part flex-c"
            v-for="item in columns"
            :key="item.name"
            v-bind:class="{ 'bottom-line': courseFlag == item.coursewareColumnId }"
            @click="onSltCourse(item.coursewareColumnId)"
          >
            {{ item.name }}
          </div>
          <div class="course-zw"></div>
        </div>
        <div class="selectFilter">
          <el-select v-model="value1" placeholder="工种" @change="onWorkType('1')" size="small" class="all-slt">
            <el-option v-for="item in workType" :key="item.workTypeId" :label="item.name" :value="item.workTypeId"></el-option>
          </el-select>
          <el-select v-model="value2" placeholder="时间" @change="onTime" size="small" class="all-slt">
            <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select v-model="value3" placeholder="等级" @change="onWorkType('3')" size="small" class="all-slt">
            <el-option v-for="item in rangeType" :key="item.name" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </div>
        <div v-if="columnFlag == 1">
          <all :courses2="courseList111" :pageTotal="total"></all>
        </div>
        <div v-else class="noData">暂无数据</div>
      </div>
      <el-pagination
        class="pagination"
        v-if="columnFlag == 1"
        background
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, prev, pager, next"
        :total="pagination.total"
      ></el-pagination>
    </div>
    <pageFooter></pageFooter>
  </div>
</template>
<script>
import pageHeader from "@/components/PageHeader.vue";
import pageFooter from "@/components/PageFooter.vue";
import all from "./components/all.vue";
const sha256 = require("js-sha256").sha256;
export default {
  components: {
    pageHeader,
    all,
    pageFooter
  },
  mounted() {
    let itemName = this.$route.query.type;
    let rangeType = "";
    if (itemName == "安全教育") {
      rangeType = 3;
    } else if (itemName == "规章制度") {
      rangeType = 2;
    } else if (itemName == "专业知识") {
      rangeType = 1;
    } else if (itemName == "日常教育") {
      rangeType = 4;
    }
    this.init(rangeType);
  },
  methods: {
    init(type) {
      //获取课件栏目
      this.getCoursewareColumn();
      //获取课件列表
      this.getAllCourseware(type);
      //获取工种信息
      this.getAllWorkType();
      this.value3 = type;
      //let type = this.$route.query.type;
    },
    getCoursewareColumn() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/courseware/selectAllCoursewareColumn",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: "appid-xinyun-0003",
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/courseware/selectAllCoursewareColumn", time),
            timestamp: time
          }
        })
        .then(res => {
          if (res.retCode === "00000") {
            this.columns = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleSizeChange() {},
    getAllCourseware(type) {
      let that = this;
      let time = new Date().valueOf();

      let data = {
        orderType: "all",
        pageIndex: this.pagination.page,
        pageSize: "18",
        level: ""
      };
      if (type) {
        data.level = type;
      }
      that
        .$http({
          url: "/wisdomlearn/courseware/selectAllCourseware",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: "appid-xinyun-0003",
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/courseware/selectAllCourseware", time),
            timestamp: time
          },
          data: data
        })
        .then(res => {
          let courses = res.data.list;
          for (let course of courses) {
            course["photo"] = this.config.imgPath + course["photo"];
          }
          this.courseList111 = courses;
          this.copyCourseList = courses;
          this.pagination.total = res.data.total;
          this.onSltCourse(1);
          //this.firstPageToCourse();
        })
        .catch(err => {
          console.log(err);
        });
    },
    getAllWorkType() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/base/selectAllWorkType",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: "appid-xinyun-0003",
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/base/selectAllWorkType", time),
            timestamp: time
          }
        })
        .then(res => {
          if (res.retCode === "00000") {
            let all = {
              reateTime: "",
              id: null,
              isDelete: null,
              name: "全部",
              number: "",
              updateTime: "",
              workTypeId: ""
            };
            res.data.unshift(all);
            this.workType = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    onSltCourse(id) {
      let _this = this;
      let type = this.$route.query.type;
      let time = new Date().valueOf();
      let reId = 0;
      this.courseFlag = id;
      if (id == "1") {
        this.courseList111 = this.copyCourseList;
      } else {
        let newCourseList = [];
        for (let data of this.copyCourseList) {
          if (data.coursewareColumnId === id) {
            newCourseList.push(data);
          }
        }
        this.courseList111 = newCourseList;
      }
    },
    onWorkType(type) {
      let that = this;
      let time = new Date().valueOf();
      let data = {
        workTypeId: that.value1,
        orderType: that.value2,
        pageIndex: "1",
        pageSize: "18"
      };
      if (type == "3") {
        data.level = that.value3;
      }
      that
        .$http({
          url: "/wisdomlearn/courseware/selectAllCourseware",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: "appid-xinyun-0003",
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/courseware/selectAllCourseware", time),
            timestamp: time
          },
          data: data
        })
        .then(res => {
          let courses = res.data.list;
          for (let course of courses) {
            course["photo"] = this.config.imgPath + course["photo"];
          }
          this.courseList111 = courses;
          this.pagination.total = parseInt(res.data.total);
        })
        .catch(err => {
          console.log(err);
        });
    },
    onTime() {
      let that = this;
      let time = new Date().valueOf();
      let data = {
        pageIndex: "1",
        pageSize: "18"
      };
      data.workTypeId = that.value1;
      if (that.value2 != "") {
        data.orderType = that.value2;
      }
      that
        .$http({
          url: "/wisdomlearn/courseware/selectAllCourseware",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: "appid-xinyun-0003",
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/courseware/selectAllCourseware", time),
            timestamp: time
          },
          data: data
        })
        .then(res => {
          let courses = res.data.list;
          for (let course of courses) {
            course["photo"] = this.config.imgPath + course["photo"];
          }
          this.courseList111 = courses;
          this.copyCourseList = courses;
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleCurrentChange(val) {
      this.pagination.page = val + "";
      this.getAllCourseware(this.value3);
    }
  },
  data() {
    return {
      type: this.$route.query.type,
      bannerImg: require("@/assets/img/courseware/banner.png"),
      tabPosition: "top",
      courseFlag: "1",
      courseTitleFlag: "",
      courses: [],
      courseList: [],
      courseList111: [],
      copyCourseList: [],
      total: 0,
      workType: [],
      courseColumns: {},
      rangeType: [
        {
          value: 0,
          name: "全部"
        },
        {
          value: 1,
          name: "一级教育"
        },
        {
          value: 2,
          name: "二级教育"
        },
        {
          value: 3,
          name: "三级教育"
        },
        {
          value: 4,
          name: "红线教育"
        }
      ],
      value: "",
      courses1: [],
      value1: "",
      value2: "",
      value3: "",
      columnFlag: 1,
      columns: [],
      timeOptions: [
        {
          value: "all",
          label: "全部"
        },
        {
          value: "now",
          label: "最新"
        }
      ],
      pagination: {
        page: "1",
        limit: 18,
        total: 0
      }
    };
  }
};
</script>
<style>
.courseware {
  min-width: 1200px;
}
.bottom-line {
  color: #084dcd;
  border-bottom: 5px solid #084dcd;
}
.course_content {
  background: #f2f2f2;
  flex: 1;
}
.selectFilter {
  width: 1200px;
  margin: 0 auto;
}
.course-zw {
  flex: 2;
}
.course-part {
  align-items: center;
  flex: 1;
  font-size: 22px;
  font-family: PingFangSC-Medium;
  letter-spacing: 0.09px;
  cursor: pointer;
  margin: 5px 10px 0 10px;
}
.course_banner {
  min-width: 1200px;
  height: 296.5px;
}
.course-bt {
  height: 50px;
  background-color: #fff;
  display: flex;
}
.course_title .el-tabs__nav-scroll {
  background-color: #fff;
  width: 100%;
}
.course_content .course_title .el-tabs__content {
  min-height: 50px;
}
.courseFont {
  width: 284px;
  height: 284px;
  border: 1px solid yellowgreen;
}
.course_index {
  color: white;
  font-size: 48px;
  width: 1941.5px;
  height: 296.5px;
  /* border:1px solid blue; */
  background-image: linear-gradient(180deg, #5786f9 1%, #26a5dc 100%);
  border: 1px solid #979797;
}
.courseware .course_title .el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}
.courseware .course_title .el-tabs__item {
  height: 80px;
  line-height: 80px;
  font-size: 24px;
  color: #161718;
  letter-spacing: 0.09px;
}
.all-slt {
  width: 145px;
  height: 45px;
  margin: 34px 20px 11px 0;
}
.pagination {
  display: flex;
  /* align-items: center; */
  justify-content: center;
  padding-bottom: 20px;
  margin: 0;
}
</style>
